<template>
  <div>
    <a-modal
      :title="$t('all.autotext730')"
      :visible="visible"
      :footer="null"
      @cancel="visible=false"
    >
      <div class="type" v-if="type === 1 || type === 3">
        <div>{{ $t('all.autotext1702') }}：</div>
        <div>
          <div v-for="(item, i) in fileInfoTo" :key="i">
            <a @click="preview(item.fileUrl)">{{ item.fileName }}</a>
          </div>
        </div>
      </div>
      <div v-if="type === 2 || type === 3">
        <div v-for="(item, i) in fileInfo" :key="i" class="text-wrap">
          <div class="text">{{ $t('all.autotext1708') }}：<a @click="preview(item.fileUrl)">{{ item.fileName }}</a></div>
          <div class="text">{{ $t('all.autotext1703') }}：{{ item.applyNo }}</div>
          <div class="text">{{ $t('all.autotext1704') }}：{{ item.submitTime | moment() }}</div>
        </div>
      </div>
    </a-modal>
    <!-- 图片预览 -->
    <a-modal
      width="50%"
      :visible="imgVisible"
      :footer="null"
      @cancel="imgVisible = false,itemFileUrl=''"
    >
      <div class="image">
        <viewer>
          <img :src="itemFileUrl | dealImageUrl" />
        </viewer>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      type: '',
      fileInfo: [],
      fileInfoTo: [],
      itemFileUrl: '',
      imgVisible: false
    }
  },
  methods: {
    open (res) {
      this.visible = true
      this.type = res.type
      this.fileInfo = res.fileInfo || []
      this.fileInfoTo = res.fileInfoTo || []
    },
    // 单文件预览
    preview (fileUrl) {
      const formatImg = /(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
      if (formatImg.test(fileUrl)) {
        this.itemFileUrl = fileUrl
        this.imgVisible = true
      } else {
        // 打开空白页 展示文件
        const fullFileUrl = this.$options.filters.dealImageUrl(fileUrl)
        window.open(fullFileUrl, '_blank')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.type {
  display: flex;
  margin-bottom: 20px;
  .text {
    margin-bottom: 8px;
    color: #333;
  }
}
.text-wrap {
  margin-bottom: 20px;
}

.image {
  img {
    display: block;
    width: 80%;
    margin: 10px auto;
  }
}
</style>
